import styles from './index.module.scss'
import { useState, useEffect } from 'react'
import EnterEmail from './enter-email'
import SignIn from './sign-in'
import EnterPwd from './enter_pwd'
import ResetPwd from './reset_pwd'
import ResetVerify from './reset_verify'
import dynamic from 'next/dynamic'
import { getLoginConvertData } from '@/api/score'

const ModalSendScore = dynamic(() => import('../modal/modal-send-score'))

const Index = ({ onClose }) => {
  const [domType, setDomType] = useState('enter_email')
  const [email, setEmail] = useState('') // 邮箱。多处将使用
  const [code, setCode] = useState('') // code，有共用
  const [showSendVip, setShowSendVip] = useState(false)
  const [loginConvert, setLoginConvert] = useState({})
  const DOM_TYPE = {
    enter_email: EnterEmail, // 输入邮箱
    sign_in: SignIn, // 注册
    enter_pwd: EnterPwd, //输入密码登录
    reset_pwd: ResetPwd, // 重设密码
    reset_verify: ResetVerify //重设验证
  }
  const Component = DOM_TYPE[domType]

  const close = () => {
    setShowSendVip(false)
    window.location.reload()
  }

  const getLoginMsg = async () => {
    const res = await getLoginConvertData()
    res.data.date =
      res.data.exchangeDuration < 30
        ? `${res.data.exchangeDuration}日`
        : `${Math.floor(res.data.exchangeDuration / 30)}月`
    setLoginConvert(res.data)
  }

  useEffect(() => {
    document.body.style.overflowY = 'hidden'
    getLoginMsg()

    return () => {
      document.body.style.overflowY = 'auto'
    }
  }, [])

  return (
    <>
      <div className={styles.loginMask}>
        <div className={styles.loginBox}>
          <img loading="lazy" src="/images/close.png" alt="退出" className={styles.loginClose} onClick={onClose} />
          <div className={styles.title}>
            <img loading="lazy" src="/images/ico.webp" alt="logo" className={styles.logo} />
          </div>
          <Component
            setType={setDomType}
            email={email}
            setEmail={setEmail}
            onClose={onClose}
            code={code}
            setCode={setCode}
            openSendVip={() => setShowSendVip(true)}
          />
        </div>
      </div>
      {showSendVip ? <ModalSendScore onClose={close} data={loginConvert} /> : null}
    </>
  )
}

export default Index
